﻿@page "/editorforms"

<h3>EditorForm 表单组件</h3>

<h4>通过绑定数据模型自动呈现编辑表单</h4>

<p><code>EditorForm</code> 组件是一个非常实用的组件，当进行数据编辑时，仅需要将 <code>Model</code> 属性赋值即可。</p>

<ul class="ul-demo">
    <li>绑定模型默认自动生成全部属性</li>
    <li>如不需要编辑列，设置 <code>Editable</code> 即可，默认值为 <code>true</code> 生成编辑组件</li>
    <li>复杂编辑列，设置 <code>EditTemplate</code> 模板，进行自定义组件进行编辑</li>
    <li>表单内按钮可以设置多个，设置 <code>Buttons</code> 模板即可</li>
</ul>

<Block Title="基础用法" Introduction="通过绑定 <code>TModel</code> 数据模型，自动生成模型各个字段的可编辑表单" CodeFile="editorform.1.html">
    <p>直接绑定模型 <code>Model</code>，设置 <b>爱好</b> 字段不显示</p>
    <div class="form-demo">
        <label class="legend">表单示例</label>
        <EditorForm Model="@Model">
            <FieldItems>
                <EditorItem @bind-Field="@Model.Hobby" Editable="false" />
            </FieldItems>
            <Buttons>
                <div class="d-flex mt-3">
                    <Button Icon="fa fa-save" Text="提交" />
                </div>
            </Buttons>
        </EditorForm>
    </div>
</Block>

<Block Title="开启数据验证" Introduction="通过嵌套 <code>ValidateForm</code> 组件实现数据合规检查功能" CodeFile="editorform.2.html">
    <p>组件内置到 <code>ValidateForm</code> 内开启数据合规检查功能，<b>爱好</b> 字段使用 <code>EditTemplate</code> 模板自定义组件呈现数据</p>
    <p>通过设置 <code>Readonly</code> 属性，使 <code>生日</code> 字段为只读</p>
    <div class="form-demo">
        <label class="legend">表单示例</label>
        <ValidateForm Model="@ValidateModel">
            <EditorForm TModel="Dummy">
                <FieldItems>
                    <EditorItem @bind-Field="@Model.BirthDay" Readonly="true" />
                    <EditorItem @bind-Field="@Model.Hobby">
                        <EditTemplate Context="value">
                            @{
                                var model = value as Dummy;

                                // 此处也可以不使用 Context 值，直接使用模型 ValidateModel 即可
                            }
                            <div class="form-group col-12">
                                <CheckboxList TModel="SelectedItem" TValue="IEnumerable<string>" @bind-Value="@model!.Hobby" Items="@Hobbys"
                                              ValueField="Value" TextField="Text" CheckedField="Active">
                                    <RequiredValidator ErrorMessage="至少选择一种爱好" />
                                </CheckboxList>
                            </div>
                        </EditTemplate>
                    </EditorItem>
                </FieldItems>
                <Buttons>
                    <div class="d-flex mt-3">
                        <Button ButtonType="ButtonType.Submit" Icon="fa fa-save" Text="提交" />
                    </div>
                </Buttons>
            </EditorForm>
        </ValidateForm>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="EditorItem 属性" Items="@GetEditorItemAttributes()" />
